<template>
  <div class="editOrDetail bk-edit">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="ruleJ"
      label-width="100px"
      class="bk-form"
      :label-position="config.labelPosition"
      :validate-on-rule-change="validateOnRuleChange"
    >
      <div
        v-for="(item, index) in dataHead"
        :key="index"
        class="bk-item"
        :style="{
          width:
            item.width ||
            (item.type == 'search' && item.type == 'auto') ||
            config.autoWidth ||
            '20%',
        }"
        :class="item.itemClass"
      >
        <!-- input输入框:class="{ 'no-border': item.type == 'upload' }" -->
        <el-form-item
          v-if="item.type == 'input'"
          :prop="item.prop"
          :class="item.class"
          :label="item.label"
          :label-width="
            $px2rem(item.labelWidth) ||
            $px2rem(config.labelWidth) ||
            $px2rem('100px')
          "
        >
          <div
            :style="{
              display: item.showBtn || item.iconClass ? 'flex' : 'block',
            }"
          >
            <el-input
              v-model.trim="ruleForm[item.prop]"
              type="text"
              :maxlength="item.maxLength"
              :disabled="item.disabled || !isAdd"
              :clearable="!item.clearable"
              show-word-limit
              :placeholder="
                isAdd ? item.placeholder || `请输入${item.label}` : ''
              "
              @input="item.input ? item.input() : null"
              @blur="item.blur ? item.blur() : null"
              @focus="item.focus ? item.focus() : null"
              @keyup.enter.native="
                item.enterEvent ? item.enterEvent(item, $event) : null
              "
            />
            <el-button
              v-if="item.showBtn"
              :type="item.btnConfig.type || 'primary'"
              :plain="item.btnConfig.plain || 'plain'"
              class="item_inline_btn"
              :class="item.btnConfig.className"
              @click="item.handleClick ? item.handleClick() : null"
              >{{ item.btnConfig.name }}</el-button
            >
            <i v-if="item.iconClass" :class="item.iconClass"></i>
          </div>
        </el-form-item>
        <!-- textarea -->
        <el-form-item
          v-if="item.type == 'textarea'"
          :prop="item.prop"
          :class="item.class"
          :label="item.label"
          :label-width="
            $px2rem(item.labelWidth) ||
            $px2rem(config.labelWidth) ||
            $px2rem('100px')
          "
        >
          <div
            :style="{
              display: item.showBtn ? 'flex' : 'block',
            }"
          >
            <el-input
              v-model="ruleForm[item.prop]"
              type="textarea"
              :maxlength="item.maxLength"
              :disabled="item.disabled || !isAdd"
              :clearable="!item.clearable"
              show-word-limit
              :placeholder="
                isAdd ? item.placeholder || `请输入${item.label}` : ''
              "
              :autosize="{ minRows: 2, maxRows: 6 }"
              @input="item.input ? item.input() : null"
              @blur="item.blur ? item.blur() : null"
              @focus="item.focus ? item.focus() : null"
            />
            <el-button
              v-if="item.showBtn"
              :type="item.btnConfig.type || 'primary'"
              :plain="item.btnConfig.plain || 'plain'"
              class="item_inline_btn"
              :class="item.btnConfig.className"
              @click="item.handleClick ? item.handleClick() : null"
              >{{ item.btnConfig.name }}</el-button
            >
          </div>
        </el-form-item>

        <!-- 下拉选择框 -->
        <el-form-item
          v-if="item.type == 'select'"
          :label="item.label"
          :prop="item.prop"
          :class="item.class"
          :label-width="
            $px2rem(item.labelWidth) ||
            $px2rem(config.labelWidth) ||
            $px2rem('100px')
          "
        >
          <div
            :style="{
              display: item.iconClass ? 'flex' : 'block',
            }"
          >
            <el-select
              v-model="ruleForm[item.prop]"
              :popper-append-to-body="false"
              :placeholder="
                isAdd ? item.placeholder || `请选择${item.label}` : ''
              "
              :disabled="item.disabled || !isAdd"
              filterable
              :multiple="item.multiple || false"
              :collapse-tags="true"
              default-first-option
              :remote="item.remote || false"
              :remote-method="
                (query) => {
                  item.remoteMethod ? item.remoteMethod(query) : null;
                }
              "
              :clearable="!item.clearable"
              @change="item.change ? item.change() : null"
            >
              <el-option
                v-for="ele in item.options"
                :key="
                  item.props && Object.keys(item.props).length
                    ? ele[item.props.value]
                    : ele.value
                "
                :label="
                  item.props && Object.keys(item.props).length
                    ? ele[item.props.label]
                    : ele.label
                "
                :value="
                  item.props && Object.keys(item.props).length
                    ? ele[item.props.value]
                    : ele.value
                "
              />
            </el-select>
            <i
              v-if="item.iconClass"
              @click="item.handleClick ? item.handleClick(item) : null"
              :title="item.title"
              :class="item.iconClass"
            ></i>
          </div>
        </el-form-item>
        <!-- 级联 -->
        <el-form-item
          v-if="item.type == 'cascader'"
          :label="item.label"
          :prop="item.prop"
          :class="item.class"
          :label-width="
            $px2rem(item.labelWidth) ||
            $px2rem(config.labelWidth) ||
            $px2rem('100px')
          "
        >
          <div>
            <el-cascader
              v-model="ruleForm[item.prop]"
              :append-to-body="false"
              :placeholder="
                isAdd ? item.placeholder || `请选择${item.label}` : ''
              "
              :disabled="item.disabled || !isAdd"
              :options="item.options"
              :props="item.props"
              :ref="item.refs || item.prop"
              :show-all-levels="item.showAllLevels || false"
              :collapse-tags="item.collapseTags || false"
              filterable
              :clearable="!item.clearable"
              @change="item.change ? item.change() : null"
            />
          </div>
        </el-form-item>
        <!-- 时间 -->
        <el-form-item
          v-if="
            [
              'date',
              'daterange',
              'month',
              'datetime',
              'datetimerange',
            ].includes(item.type)
          "
          :label="item.label"
          :prop="item.prop"
          :class="item.class"
          :label-width="
            $px2rem(item.labelWidth) ||
            $px2rem(config.labelWidth) ||
            $px2rem('100px')
          "
        >
          <div>
            <el-date-picker
              class="date_picker"
              v-model="ruleForm[item.prop]"
              :type="item.type"
              :format="item.format || 'yyyy-MM-dd'"
              :value-format="item.valueFormat || 'yyyy-MM-dd'"
              :start-placeholder="item.startPlaceholder || '开始日期'"
              :end-placeholder="item.endPlaceholder || '结束日期'"
              :placeholder="
                isAdd ? item.placeholder || `请选择${item.label}` : ''
              "
              :picker-options="item.pickerOptions"
              :clearable="!item.clearable"
              :disabled="item.disabled || !isAdd"
              :default-time="item.defaultTime || ''"
              @change="item.change ? item.change(ruleForm[item.prop]) : null"
            />
          </div>
        </el-form-item>
        <!-- 计数器 -->
        <el-form-item
          v-if="item.type == 'inputNumber'"
          :label="item.label"
          :prop="item.prop"
          :class="item.class"
          :label-width="
            $px2rem(item.labelWidth) ||
            $px2rem(config.labelWidth) ||
            $px2rem('100px')
          "
        >
          <!-- value=value.match(/\d+\.?\d{0,2}/,'') -->
          <div :class="{ unitItem: item.unit }">
            <el-input
              @input="item.input ? item.input() : null"
              @blur="item.blur ? item.blur() : null"
              @keyup.native="numKeyUp($event, item.prop, item, item.len)"
              show-word-limit
              :maxlength="item.maxLength"
              :clearable="!item.clearable"
              :disabled="item.disabled || !isAdd"
              v-model="ruleForm[item.prop]"
              :placeholder="item.placeholder || `请输入${item.label}`"
            ></el-input>
            <span class="unitBox" v-if="item.unit">
              {{ item.unit }}
            </span>
          </div>
        </el-form-item>
        <!-- 计数器范围 -->
        <el-form-item
          v-if="item.type == 'numrange'"
          :label="item.label"
          :class="item.class"
          class="muit-ele"
          :label-width="
            $px2rem(item.labelWidth) ||
            $px2rem(config.labelWidth) ||
            $px2rem('100px')
          "
          :required="getRequired(item.minprop)"
        >
          <div>
            <el-col :span="item.unit ? 9 : 11">
              <el-form-item :prop="item.minprop">
                <el-input
                  @input="item.input ? item.input() : null"
                  @keyup.native="numKeyUp($event, item.minprop, item, item.len)"
                  :clearable="!item.clearable"
                  :disabled="item.disabled || !isAdd"
                  v-model="ruleForm[item.minprop]"
                  :placeholder="item.minPlaceholder || `请输入最小值`"
                  @blur="item.minBlur ? item.minBlur() : null"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">{{
              item.splitSymbol || "-"
            }}</el-col>
            <el-col :span="item.unit ? 10 : 11">
              <el-form-item :prop="item.maxprop">
                <el-input
                  @input="item.input ? item.input() : null"
                  @keyup.native="numKeyUp($event, item.maxprop, item, item.len)"
                  :clearable="!item.clearable"
                  :disabled="item.disabled || !isAdd"
                  v-model="ruleForm[item.maxprop]"
                  :placeholder="item.maxPlaceholder || `请输入最大值`"
                  @blur="item.maxBlur ? item.maxBlur() : null"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3" class="unit-col">
              <span class="unitBox" v-if="item.unit">
                {{ item.unit }}
              </span>
            </el-col>
          </div>
        </el-form-item>
        <!-- 单选 -->
        <el-form-item
          v-if="item.type == 'radio'"
          :label="item.label"
          :class="item.class"
          :label-width="
            $px2rem(item.labelWidth) ||
            $px2rem(config.labelWidth) ||
            $px2rem('100px')
          "
          :required="getRequired(item.prop)"
          class="muit-ele"
        >
          <el-col :span="item.textprop ? 11 : 24">
            <el-form-item :prop="item.prop">
              <el-tooltip
                v-if="item.tooltip ? true : false"
                class="item"
                effect="dark"
                :content="item.tooltip"
                placement="top"
              >
                <i class="el-icon-question" /> </el-tooltip
              >&nbsp;
              <el-radio-group
                v-model="ruleForm[item.prop]"
                :disabled="item.disabled || !isAdd"
                @change="item.change ? item.change(ruleForm[item.prop]) : null"
              >
                <el-radio
                  v-for="(el, index) in item.options"
                  :key="index"
                  :label="
                    item.props && Object.keys(item.props).length
                      ? el[item.props.value]
                      : el.value
                  "
                  >{{
                    item.props && Object.keys(item.props).length
                      ? el[item.props.label]
                      : el.label
                  }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="11" v-if="item.showInput">
            <el-form-item :prop="item.textprop">
              <el-input
                :disabled="item.disabled || !isAdd"
                v-model="ruleForm[item.textprop]"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <div v-if="!isAdd || config.type == 'add'">
            
            <input type="text">
          </div>
          <div class="bk-text" v-else>
            <span v-if="item.formatter">{{ item.formatter() }}</span>
            <span v-else>{{ ruleForm[item.detailProp || item.prop] }}</span>
          </div> -->
        </el-form-item>
        <!-- 多选 -->
        <el-form-item
          v-if="item.type == 'checkbox'"
          :label="item.label"
          :class="item.class"
          :label-width="
            $px2rem(item.labelWidth) ||
            $px2rem(config.labelWidth) ||
            $px2rem('100px')
          "
          :prop="item.prop"
          :required="getRequired(item.prop)"
        >
          <el-col :span="item.showInput ? 18 : 24">
            <el-form-item :prop="item.prop">
              <el-checkbox-group
                v-model="ruleForm[item.prop]"
                :disabled="item.disabled || !isAdd"
                @change="item.change ? item.change(ruleForm[item.prop]) : null"
              >
                <el-checkbox
                  v-for="(el, index) in item.options"
                  :key="index"
                  :label="
                    item.props && Object.keys(item.props).length
                      ? el[item.props.value]
                      : el.value
                  "
                  >{{
                    item.props && Object.keys(item.props).length
                      ? el[item.props.label]
                      : el.label
                  }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="item.showInput ? 6 : 0" v-if="item.showInput">
            <el-form-item :prop="item.textprop" v-if="item.textprop">
              <el-input
                :disabled="item.disabled || !isAdd"
                v-model="ruleForm[item.textprop]"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <!-- 开关 -->
        <el-form-item
          v-if="item.type == 'switch'"
          :label="item.label"
          :class="item.class"
          :label-width="
            $px2rem(item.labelWidth) ||
            $px2rem(config.labelWidth) ||
            $px2rem('100px')
          "
          :prop="item.prop"
        >
          <el-form-item :prop="item.prop">
            <el-switch
              v-model="ruleForm[item.prop]"
              :active-color="item.activeColor || '#13ce66'"
              :inactive-color="item.inactiveColor || '#ff4949'"
              :active-text="item.activeText || ''"
              :inactive-text="item.inactiveText || ''"
              :active-value="item.activeValue"
              :inactive-value="item.inactiveValue"
              :disabled="item.disabled"
              @change="
                item.change
                  ? item.change(scope.row, scope.$index, item.prop)
                  : null
              "
            ></el-switch>
          </el-form-item>
        </el-form-item>
        <!-- 纯文本 -->
        <el-form-item
          v-if="item.type == 'text'"
          :label="item.label"
          :prop="item.prop"
          :class="item.class"
          :label-width="config.labelWidth || item.labelWidth || '100px'"
        >
          <div :class="item.textClass" class="bk-text-span">
            <span v-if="item.formatter">{{ item.formatter(item.prop) }}</span>
            <span
              v-else-if="item.render"
              v-html="item.render(item.prop)"
            ></span>
            <span v-else>{{ ruleForm[item.detailProp || item.prop] }}</span>
          </div>
        </el-form-item>
        <!-- 上传 -->
        <el-form-item
          v-if="item.type == 'upload'"
          :label="item.label"
          :prop="item.prop"
          :class="item.class"
          :label-width="
            $px2rem(item.labelWidth) ||
            $px2rem(config.labelWidth) ||
            $px2rem('100px')
          "
        >
          <uploadFile
            :limit="item.limit || 10"
            :multiple="item.multiple"
            :newFileList="ruleForm[item.showListProp]"
            :uploadList="ruleForm[item.detailListProp]"
            :disabledFlag="!isAdd || item.disabled"
            @uploadImgSuccess="onSuccess($event, item)"
            @removeImg="removeImg($event, item)"
          />
        </el-form-item>
        <!-- slot -->
        <el-form-item
          v-if="item.type == 'slot'"
          :label="item.label"
          :prop="item.prop"
          :class="item.class"
          :label-width="
            $px2rem(item.labelWidth) ||
            $px2rem(config.labelWidth) ||
            $px2rem('100px')
          "
        >
          <slot :prop="item"></slot>
        </el-form-item>

        <!-- 具名插槽 -->
        <el-form-item
          v-if="item.type == 'nameSlot'"
          :label="item.label"
          :prop="item.prop"
          :class="item.class"
          :label-width="
            $px2rem(item.labelWidth) ||
            $px2rem(config.labelWidth) ||
            $px2rem('100px')
          "
        >
          <slot :name="item.prop" :prop="item"></slot>
        </el-form-item>
        <!-- render -->
        <el-form-item v-if="item.type == 'render'" class="btn-item">
          <div v-for="(ele, ind) in item.btnList" :key="ind" class="btn-box">
            <List :config="ele" :data="item" />
          </div>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
// import mixins from './mixins'
/**
 * dataJ 数据源
 * ruleJ 表单验证数据源
 * type 详情（detail） || 新增(add)
 * ruleForm 表单数据
 */

import uploadFile from "../uploadFile/upload.vue";
// import uploadFile from "@/commom/uploadFile/upload.vue";

export default {
  name: "EditOrDetail",
  components: {
    uploadFile,
  },
  model: {
    prop: "ruleForm",
    event: "formChange",
  },
  props: {
    // 数据源
    dataJ: {
      type: Array,
      default: () => [],
    },
    // 表单规则
    ruleJ: {
      type: Object,
      default: () => ({}),
    },
    // 表单数据
    ruleForm: {
      type: Object,
      default: () => ({}),
    },
    // 配置
    config: {
      type: Object,
      default: () => {
        return {
          type: "add",
          autoWidth: "25%",
          labelPosition: "right",
          labelWidth: "",
        };
      },
    },
    isAdd: {
      type: Boolean,
      default: true,
    },
    validateOnRuleChange: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      ruleFormList: ["select"], // 需要获取name值的插件
      ruleFormName: {}, // ruleForm字段对应name值
      dataHead: [],
    };
  },
  computed: {},
  watch: {
    // ruleForm: {
    //   handler(val) {
    //     // this.ruleForm
    //   },
    // },
    dataJ: {
      handler(val) {
        this.dataHead = val.filter((e) => !e.hidden);
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    this.$nextTick(async () => {
      await this.setInitValue();
      await this.$refs.ruleForm.clearValidate();
    });
  },
  methods: {
    $px2rem(px) {
      if (!px) {
        return false;
      } else {
        if (/%/gi.test(px)) {
          // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%
          return px;
        } else {
          return parseFloat(px) / 100 + "rem";
        }
      }
    },
    onSuccess(event, item) {
      this.ruleForm[item.showListProp].push(event.data);
      if (Array.isArray(this.ruleForm[item.prop])) {
        let props = item.props || "id";
        this.ruleForm[item.prop].push(event.data[props]);
      }
      this.signalVaild(item.prop);
    },
    removeImg(event, item) {
      let ind = this.ruleForm[item.showListProp].findIndex(
        (el) => el.id == event.id
      );
      this.ruleForm[item.showListProp].splice(ind, 1);
      this.ruleForm[item.prop].splice(ind, 1);
    },
    getRequired(prop) {
      if (this.ruleJ[prop]) {
        return this.ruleJ[prop][0]["required"];
      } else {
        return false;
      }
    },
    numKeyUp(e, prop, item, len = [9, 2]) {
      if (item.dataType == "float") {
        let rgp = new RegExp(`^\\d{0,${len[0]}}\\.?\\d{0,${len[1]}}`);
        e.target.value = e.target.value.match(rgp, "");
      } else {
        e.target.value = e.target.value.replace(/[^\d]/g, "");
      }
      this.$set(this.ruleForm, prop, e.target.value);
    },
    // ruleForm初始化
    setInitValue() {
      let ruleForm = {};
      this.dataHead.forEach((el) => {
        if (el.prop || el.textprop || el.minprop || el.maxprop) {
          if (el.type == "checkbox" || (el.type == "select" && el.multiple)) {
            ruleForm[el.prop] = [];
          } else {
            ruleForm[el.prop] = "";
          }
          if (el.textprop) {
            ruleForm[el.textprop] = "";
          }
          if (el.minprop && el.maxprop) {
            ruleForm[el.minprop] = "";
            ruleForm[el.maxprop] = "";
          }
        }
      });
      this.$emit("formChange", { ...ruleForm, ...this.ruleForm });
    },
    // 清除表单验证
    clearVaild(arr) {
      if (arr && arr.length) {
        arr.forEach((el) => {
          this.$refs.ruleForm.clearValidate(el);
        });
      } else {
        this.$refs.ruleForm.clearValidate();
      }
    },
    signalVaild(fileValue) {
      this.$refs.ruleForm.validateField(fileValue);
    },
    resetForm() {
      this.dataHead.forEach((el) => {
        if (el.prop || el.textprop || el.minprop || el.maxprop) {
          if (this.ruleForm[el.prop] instanceof Array) {
            this.ruleForm[el.prop] = [];
          } else if (this.ruleForm[el.prop] instanceof Object) {
            this.ruleForm[el.prop] = {};
          } else {
            if (el.type == "numrange") {
              this.ruleForm[el.minprop] = "";
              this.ruleForm[el.maxprop] = "";
            } else {
              this.ruleForm[el.prop] = "";
            }
          }
          if (el.defaultVal || el.defaultVal === 0 || el.defaultVal === null) {
            this.ruleForm[el.prop] = el.defaultVal;
          }
        }
      });
      this.$nextTick(() => {
        this.$refs.ruleForm && this.$refs.ruleForm.clearValidate();
      });
    },
    // 表单验证
    formValid(validTipFlag) {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate((valid, object) => {
          if (valid) {
            resolve(true);
          } else {
            if (validTipFlag != false) {
              this.$message({
                type: "warning",
                message: object[Object.keys(object)[0]][0].message,
              });
            }
            reject(false);
          }
        });
      });
    },
    // 获取对应prop的name值
    async getValueName() {
      this.ruleFormName = {};
      await this.dataJ.forEach((el) => {
        if (this.ruleFormList.includes(el.type)) {
          let obj = el.options.find(
            (re) =>
              (el.props && re[el.props.value] == this.ruleForm[el.prop]) ||
              re.value == this.ruleForm[el.prop]
          );
          let name = obj ? (el.props ? obj[el.props.label] : obj.label) : "";
          let label = el.prop + "Name";
          this.$set(this.ruleFormName, [label], name);
        }
      });
      return this.ruleFormName;
    },
    // enterEvent($event, item) {
    //   if (!item.isScan) {
    //     return;
    //   }
    //   $event.srcElement.select();
    //   this.$emit("sweep-code", item);
    // },
  },
};
</script>
<style lang="scss" scoped>
.bk-detail {
  .bk-form {
    .bk-item {
      border-bottom: 1px solid #ccc;
      padding-bottom: 12px !important;
      padding-top: 12px !important;
      .bk-text-span {
        overflow: hidden;
        // height: 40px;
        // line-height: 40px;
      }
    }
  }
}
.editOrDetail {
  // overflow: hidden;
  .bk-form {
    width: 100%;
    .no-border {
      border: none;
    }
    .block-item {
      display: block !important;
    }
    .bk-item {
      padding: 0 1%;
      display: inline-block;
      box-sizing: border-box;
      padding-bottom: 22px;
      vertical-align: bottom;
      ::v-deep .el-form-item {
        margin-bottom: 0;
      }
      .el-form-item__label {
        min-height: 27px;
      }
      .el-form-item {
        margin-bottom: 0 !important;
      }

      ::v-deep .el-input {
        .el-input__inner {
          // padding-right: 70px;
        }
        .el-icon-circle-close {
          position: absolute;
          z-index: 1;
          background-color: #fff;
          right: 0;
          top: 1px;
          width: 38px;
          height: 30px;
        }
      }
      ::v-deep .el-date-editor {
        width: 100%;
      }
      ::v-deep .el-select {
        width: 100%;
      }
      ::v-deep .el-cascader {
        width: 100%;
      }
      ::v-deep .el-form-item__content {
        min-width: 60px;
      }
      ::v-deep input[type="number"] {
        padding-right: 10px;
      }
      .item_inline_btn {
        margin-left: 10px;
        margin-top: 3px;
      }
    }
    .bk-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 40px;
      line-height: 40px;
    }
    .bk-text-span {
      overflow: initial;
      // height: 40px;
      // line-height: 40px;
    }
    .picture {
      .bk-item {
        border: none;
      }
    }
    .btn-item {
      //  white-space: nowrap;
      ::v-deep .el-form-item__content {
        margin: 0 !important;
      }
      .btn-box {
        display: inline-block;
        margin: 0 10px;
      }
    }
    .line {
      text-align: center;
    }
  }
  .unitItem {
    display: flex;
  }
  .unitBox {
    margin-left: 3px;
    white-space: nowrap;
  }
  .unit-col {
    text-align: right;
  }
}
</style>
<style>
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
@media screen and (max-width: 1366px) {
  .editOrDetail .el-form-item__label {
    line-height: 40px !important;
  }
}
</style>
